"use client";
import { Swiper, SwiperProps, SwiperSlide, SwiperSlideProps, useSwiper } from "swiper/react";
import "swiper/css";
import React, { useRef } from "react";
import classNames from "classnames";
import { FaAngleLeft, FaAngleRight } from "react-icons/fa6";

// 定义泛型接口，支持传入任意类型的列表数据
interface SwiperListProps<T = unknown> extends SwiperProps {
  /** 轮播数据源（泛型支持任意类型） */
  list: T[];
  /**
   * 轮播项渲染函数
   * @param item - 单个列表项数据
   * @param index - 索引
   * @param slideProps - 可传递给 SwiperSlide 的原生属性
   * @returns 渲染后的轮播项内容
   */
  slideRender: (
    item: T,
    index: number,
    slideProps: SwiperSlideProps
  ) => React.ReactNode;
  /** 统一设置所有 SwiperSlide 的原生属性（可选） */
  slideProps?: SwiperSlideProps;
  /** 自定义组件 className（可选） */
  className?: string;
}

/**
 * 数据驱动的 Swiper 封装组件
 * 支持外部传入数据源和渲染函数，完全继承 Swiper 原生功能
 * @template T - 数据源类型（默认 unknown）
 */
export const SwiperList = <T,>({
  list = [],
  slideRender,
  slideProps = {},
  className,
  ...rest
}: SwiperListProps<T>) => {
  // 使用 any 类型绕开 Swiper 类型与值的冲突警告
  const swiperRef = useRef<any>(null);
  // 通过 ref 获取 swiper 实例，避免 useSwiper 的类型冲突
  const swiper = swiperRef.current?.swiper;
  return (
    <Swiper
      ref={swiperRef}
      {...rest}
      className={classNames(className)}
    >
      {list.map((item, index) => (<div className="relative">
        <SwiperSlide
          key={index} // 建议外部传入唯一 key，或这里使用 item 的唯一标识
          {...slideProps} // 统一的 SwiperSlide 属性
        >
          {slideRender(item, index, slideProps)}
        </SwiperSlide>
      </div>))}
      {/* 自定义切页按钮 */}
      <button onClick={()=>swiper?.slidePrev()} className="z-10 absolute top-1/2 transform -translate-y-1/2 left-card-p-x md:left-card-p-x-md px-4 py-8 bg-black/20 hover:bg-black/15 active:bg-black/10 hover:cursor-pointer text-white rounded-card-rounded md:rounded-card-rounded-md"><FaAngleLeft /></button>
      <button onClick={()=>swiper?.slideNext()} className="z-10 absolute top-1/2 transform -translate-y-1/2 right-card-p-x md:right-card-p-x-md px-4 py-8 bg-black/20 hover:bg-black/15 active:bg-black/10 hover:cursor-pointer text-white rounded-card-rounded md:rounded-card-rounded-md"><FaAngleRight /></button>
    </Swiper>
  );
};

// 默认导出，方便直接引入
export default SwiperList;